<template>
  <div class="contactMethod" v-loading="load">
    <div class="title">
      <span>联系人：</span>
      <el-button type="primary" icon="Plus" @click="opencontact({})">新增</el-button>
    </div>
    <el-table :data="contactTabList" border stripe style="width: 100%; height: 300px">
      <el-table-column prop="contactName" label="姓名" width="110" />
      <el-table-column prop="contactTitle" label="职务" min-width="110" />
      <el-table-column prop="contactPhone" label="电话" min-width="110" />
      <el-table-column prop="contactRemark" label="备注" width="80px" />
      <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
          <el-button link type="primary" size="large" @click="opencontact(scope.row)">
            编辑
          </el-button>
          <el-button link type="primary" size="large" @click="del(scope.row)"> 删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <ContactDrawer ref="contactDrawer" @getData="emit('getAllData')" />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import ContactDrawer from './components/contactDrawer.vue'
  import { ref, onMounted } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import {
    postSupplierContactSearch,
    deleteSupplierContactById,
  } from '@/api/controller/supplier-contact-controller/index'

  const load = ref(true)
  const contactTabList = ref([])
  const supplierId = ref(history.state?.id)
  onMounted(async () => {
    await getData()
  })
  //打开联系人抽屉
  const contactDrawer = ref()
  const opencontact = (row) => {
    contactDrawer.value.show(row, supplierId.value)
  }
  //获取数据
  const getData = async () => {
    try {
      load.value = true
      let res = await postSupplierContactSearch({ supplierId: supplierId.value })
      contactTabList.value = res.data
    } finally {
      load.value = false
    }
  }
  const del = (row) => {
    ElMessageBox.confirm('你确定要删除当前项吗?', '温馨提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
      draggable: true,
    })
      .then(async () => {
        let result = await deleteSupplierContactById({ id: row.id })
        if (result.code === 200) {
          emit('getAllData')
          ElMessage.success('删除成功')
        }
      })
      .catch(() => {
        console.log('错误')
      })
  }
  const emit = defineEmits(['getAllData'])
  defineExpose({
    getData,
  })
</script>

<style lang="scss" scoped>
  .contactMethod {
    padding: 20px;
    background-color: white;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
    border-radius: 8px;
  }
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    span {
      font-size: 16px;
      font-weight: 700;
    }
  }
</style>
